<template>
  <div class="date">
    <!-- 导航 -->
     <van-nav-bar
      title="详情页"
      left-text="返回"
      right-text="..."
      left-arrow
      @click-left="$router.go(-1)"
    />
    <!-- 店铺头 -->
    <div class="header" :style="{backgroundImage:'url('+(shopinfo.info && shopinfo.info.poi_back_pic_url)+')'}">
      <div class="left">
       <img :src="shopinfo.info && shopinfo.info.picUrl" alt="">
       <span> {{shopinfo.info && shopinfo.info.name}} </span>
      </div>
      <!-- 取消收藏按钮 -->
      <div class="right" v-if="iscollect" @click="$store.commit('cancel_collect',shopinfo.info)" style="color:red">❤</div>
      <!-- 收藏按钮 -->
      <div class="right" v-else @click="$store.commit('collect',shopinfo.info)">❤</div>
    </div>

    <!-- 店铺侧边栏 -->
    <div class="box">
      <div class="zuo">
          <van-sidebar v-model="activeKey">
            <van-sidebar-item v-for="(item,index) in shopinfo.taglist" :key="index" :title="item.name" />
          </van-sidebar>
      </div>
      <div class="you">
          <div class="good" v-for="(item,index) in shopinfo.taglist && shopinfo.taglist[activeKey].goodlist" :key="index">
            <div class="imgbox">
              <img :src="item.picture" alt="">
            </div>
            <div class="text">
              <div class="up">
                  <div class="name"> {{item.name}} </div>
                  <div class="desc"> {{item.month_saled_content}} </div>
              </div>
              <div class="down">
                  <div class="jiage"> ￥{{item.min_price}} </div>
                  <div class="btn">
                    <span>-</span>
                    <span>1</span>
                    <span @click=" requery_add(item)">+</span>
                  </div>
              </div>

            </div>
          </div>
      </div>
    </div>

    <!-- 购物车 -->
    <Shopcart ref="shopcart"/>
    <!-- 购物车按钮 -->
    <div class="submit">
      <span><van-icon name="cart" size="20" @click="$refs.shopcart.changevisible()"/>总数：{{totalCount}}  总价：{{totalPrice}} </span>
      <span>去结算</span>
    </div>
  </div>
</template>

<script>
//导入vuex中的工具函数，
import { mapState, mapActions ,mapGetters} from 'vuex'
import {shop_shopinfo} from '../utils/api' 
import { Dialog } from 'vant';
import Shopcart from '../components/Shopcart.vue';
export default {
  data(){
    return{
      activeKey:0,
      shopinfo:{},
    }
  },
  components:{
   Shopcart,
  },
  computed:{
    // ...mapState(['collectlist']),
      ...mapGetters(['totalCount','totalPrice']),
    iscollect(){
      var index = this.$store.state.collectlist.findIndex((item)=>{
        return item.mtWmPoiId == this.shopinfo.mtWmPoiId;
      })
      return index !== -1;
    }
  },
  mounted(){
    // console.log(this.$route.params.id);
    shop_shopinfo( {id:this.$route.params.id} ).then((res)=>{
      if(res.data.shopinfo){
      this.shopinfo = res.data.shopinfo;   
      }else{
          Dialog.alert({
            title: '标题',
            message: '该店铺已倒闭',
            theme: 'round-button',
          }).then(() => {
            this.$router.go(-1)
          });
      }
      // console.log(res.data); 
 
      // console.log(this.shopinfo);
      
    })
  },
  methods:{
    ...mapActions(['requery_add']),
  }

}
</script>

<style lang="scss" scoped>
.header{
  display: flex;
  justify-content: space-between;
  padding: 50px 10px;
  background-size: cover;
  background: no-repeat;
  color: #fff;
  .left{
    flex:1;
    display: flex;
    align-items: center;
    img{
      width: 35px;
      margin-right: 10px;
      border-radius: 50%;
    }
  }
  .right{
    width: 20px;
    text-align: right;
  }
}
.box{
  display: flex;
  .zuo{
    width: 80px;
    margin-right: 10px;
  }
  .you{
    flex: 1;
    .good{
      display: flex;
      margin: 10px 0;
      .imgbox{
        width: 80px;
        img{
          width: 100%;
        }
      }
      .text{
        flex: 1;
        font-size: 12px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .down{
          display: flex;
          justify-content: space-between;
          span{
            display: inline-block;
            width: 16px;
            height: 16px;
            background-color: lightskyblue;
            color: #fff;
            font-size: 12px;
            text-align: center;
            line-height: 16px;
            margin-right: 10px;
            border-radius: 50%;
          }
        }
      }
    }
  }
}
.submit{
  background-color:rgb(105, 128, 105);
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
   color: #fff;
  span:nth-child(2){
    background-color: lime;
    color: #fff;
    display: inline-block;
    padding: 8px 15px;
    border-radius: 5px;
    box-sizing: border-box;
  }
}
</style>